<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .banner{
            width: 500px;
            height: 300px;
            border: 2px solid red;
            margin: auto;
            margin-top: 50px;
            position: relative;
            overflow: hidden;
        }
        .list{
            width: 1000%;
            height: 300px;
            position: absolute;
            left: -500px;
        }
        .list li{
            width: 500px;
            height: 300px;
            float: left;
            text-align: center;
            font: bold 50px/300px '宋体';
            user-select: none;
            cursor: pointer;
        }
        .Btn{
            width: 100%;
            height: fit-content;
            font: bold 30px/40px '宋体';
            color: #000;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .Btn span{
            width: 60px;
            height: 40px;
            background: rgba(99, 99, 99, 0.5);
            text-align: center;
            user-select: none;
            cursor: pointer;
        }
        .Btn .leftBtn{
            float: left;
            border-radius: 0px 20px 20px 0px;
        }
        .Btn .rightBtn{
            float: right;
            border-radius: 20px 0px 0px 20px;
        }
        .listBtn{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .listBtn li{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: rgba(99, 99, 99, 0.5);
            float: left;
            margin-right: 10px;
            font: bold 16px/25px '宋体';
            text-align: center;
            user-select: none;
            cursor: pointer;
        }
        .listBtn .active{
            background: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <section class="banner">
        <ul class="list">
            <li style="background-color: pink;">1</li>
            <li style="background-color: hotpink;">2</li>
            <li style="background-color: blue;">3</li>
            <li style="background-color: skyblue;">4</li>
            <li style="background-color: yellow;">5</li>
            <li style="background-color: greenyellow;">6</li>
        </ul>
        <div class="Btn">
            <span class="leftBtn">&lt;</span>
            <span class="rightBtn">&gt;</span>
        </div>
        <ol class="listBtn">

        </ol>
    </section>
    <script src="js/utils.js"></script>
    <script>
        var banner = document.querySelector('.banner')
        var list = document.querySelector('.list')
        var listS = list.querySelectorAll('li')
        var listBtn = document.querySelector('.listBtn')
        var leftBtn = document.querySelector('.leftBtn')
        var rightBtn = document.querySelector('.rightBtn')
        // 
        var idx = 1
        // 定时器全局方便停止和开启
        let timer;
        // 渲染按钮
        addBtn(listS,listBtn)
        // 取圆点
        let dot = listBtn.querySelectorAll('li')
        let cloneLast = list.lastElementChild.cloneNode(true)
        let firstChild = list.firstElementChild
          // 克隆第一个元素
          let cloneFirst = list.firstElementChild.cloneNode(true);
        // 把第一个元素放到最后
        list.appendChild(cloneFirst)
        list.insertBefore(cloneLast,firstChild)
      
        // 重新获取元素
        listS = list.querySelectorAll('li')
      // 调用轮播
      autoPlay()
      // 高光封装
      function activeBtn(){
        dot.forEach((item,index)=>{
            item.className = ''
            var num = index + 1
           if(num == idx){
                item.className = 'active'
           }else if(idx - 1 === dot.length){
                dot[0].className = 'active'
           }    
        })
      }

      // 点击跳转
      listBtn.addEventListener('click',(e)=>{
            idx = e.target.innerHTML
            activeBtn() 
                move(list,{left:idx * (-500)},function(){
                    // 动画执行后改为真，表示可以点击
                    flag = true
                    if(idx === listS.length - 1){
                        idx = 0
                        list.style.left = '0px'
                    }
                })
      })

      // 右按钮封装
      let flag = true
      rightBtn.onclick = function(){
            // flag为真才执行
           if(flag === true){
               // 进来后改为假，防止连续点击出现bug
               flag = false
               // 前进1
               idx++
               // 调用高光
                activeBtn() 
                move(list,{left:idx * (-500)},function(){
                    // 动画执行后改为真，表示可以点击
                    flag = true
                    if(idx === listS.length - 1){
                        idx = 0
                        list.style.left = '-500px'
                    }
                })
           }
      }
      let flag1 = true
      leftBtn.onclick = function(){
            // flag为真才执行
           if(flag1 === true){
               // 进来后改为假，防止连续点击出现bug
               flag1 = false
               // 前进1
                idx--
               console.log(idx)
               // 调用高光
                activeBtn() 
                move(list,{left:idx * (-500)},function(){
                    // 动画执行后改为真，表示可以点击
                    flag1 = true
                    if(idx === listS.length - 1){
                        idx = 0
                        list.style.left = '-500px'
                    }else if(idx == 0){
                        idx = listS.length - 2
                        list.style.left = '-3000px'
                    }
                })
           }
      }
      // 移入停止定时器
      banner.onmouseover = function(){
          clearInterval(timer)
      }
      banner.onmouseout = function(){
          autoPlay()
      }

      // 轮播封装
      function autoPlay(){
        timer =  setInterval(()=>{
            idx++
            // 调用高光
            activeBtn() 
            move(list,{left:idx * (-500)},function(){
                if(idx === listS.length - 1){
                    idx = 1
                    list.style.left = '-500px'
                }
            })       
        },1000)
      }
        function addBtn (arr,ele){
            arr.forEach((item,index)=>{
                if(index === 0){
                    ele.innerHTML += `<li class="active">${index + 1}</li>`
                    return
                }
                ele.innerHTML += `<li>${index + 1}</li>`
            })
        }
    </script>
</body>
</html>